<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品页</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../public/js/vue.js"></script>
    <link rel="stylesheet" type="text/css" href="../public/elementUI/elementUI.css">
    <!-- 引入组件库 -->
    <script src="../public/elementUI/elementUI.js"></script>
    <!-- 引入 基础CSS -->
    <link href="../public/css/bascis.css" rel="stylesheet" type="text/css" />
    <!-- 引入样式 -->
    <link href="./css/index.css" rel="stylesheet" type="text/css" />
    <!-- 引入 footer  CSS -->
    <link href="../public/css/footer.css" rel="stylesheet" type="text/css" />
    <!-- 引入 i18n 国际化 -->
    <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>
    <!-- 引入 翻译文件 -->
    <script src="../public/js/i18nMessages.js"></script>
    <!-- 引入header css -->
    <link href="../public/css/header.css" rel="stylesheet" type="text/css" />


    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>

</head>

<body>


    <div id="app">
        <div class="header">
            <div class="content">
                <div class="left">
                    <img src="./images/ctrlD.png" width="20px" height="20px">
                    <a href="javascript:void(0);" rel="sidebar" onclick="AddFavorite('全球华人充值第一平台', location.href)">
                        <a style="color: red;"><b>Ctrl+D</b></a> <a>收藏本站</a>
                    </a>
                </div>
                <div class="mid">
                    <a href="#">华人服务商城APP</a>
                </div>
                <div class="right">
                    <!-- 登录 -->
                    <div class="login" v-if="isLogin">
                        <a @click="gotoHome" style="color: #00d7c8;">{{user.email}}</a> | <a @click.stop="logOut">退出</a>
                    </div>
                    <!-- 未登陆 -->
                    <div class="noLogin" v-if="!isLogin">
                        <a @click="gotoLogin">注册</a> | <a @click="gotoLogin">登录</a>
                    </div>

                </div>
            </div>
        </div>
        <div class="main">

            <div style="height: 40px;"></div>
            <div class="mid-content">
                <!-- 搜索框 -->
                <div class="search">
                    <div class="img">
                        <h3><img src="../public/image/logo.png"></h3>
                    </div>
                    <div class="search-input">
                        <input placeholder="search"><button><i class="el-icon-search"></i></button>
                    </div>
                </div>
                <div class="box">
                    <div class="menu">
                        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
                            @select="handleSelect">
                            <el-menu-item index="1"
                                style="background-color: #00d7c8;border-top-left-radius: 20px;border-top-right-radius: 20px;width: 200px;color: white;font-size: 20px;"
                                @click="toIndex">
                                首页
                            </el-menu-item>

                            <el-submenu v-for="(item,index) in menuList" :index="index+2+''" :key="index+2">
                                <template #title>{{item.main}}</template>
                                <el-menu-item :index='(index+2)+"-"+(index2+1)' :key='(index+2)+"-"+(index2+1)' v-for="(item2,index2) in item.body" @click="gotoProduct(item2)">{{item2.pname}}</el-menu-item>
                                
                            </el-submenu>
                            <el-menu-item index="8" @click="toIndex">
                                <template #title>联系客服</template>
                            </el-menu-item>
                        </el-menu>
                        </el-menu>
                    </div>



                </div>
            </div>
            <div class="fun">
                <div class="img">
                    <img :src="proInfo.img">
                </div>
                <div class="pro-info">

                    <h1>{{proInfo.pname}}</h1>
                    <div class="price">
                        <span :class="{'select':select==100}" @click="select=100">100元</span>
                        <span :class="{'select':select==300}" @click="select=300"> 300元</span>
                        <span :class="{'select':select==500}" @click="select=500"> 500元</span>
                        <span :class="{'select':select==1000}" @click="select=1000"> 1000元</span>
                    </div>
                    <div class="sum">
                        <span>数量：</span>
                        <el-input-number v-model="num" :min="1" :max="10" label="选择数量"></el-input-number>

                    </div>
                    <div class="total">
                        <span>USD ${{total}}</span>
                        <span @click="gotoCar">Add to Cart</span>
                    </div>
                </div>
            </div>
            <div class="attention">
                <ul>
                    <li>
                        <img src="./images/shipping1.jpg">
                        <div>
                            <p>全自动发货</p>
                            <p>在线10秒应答</p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/shipping2.jpg">
                        <div>
                            <p>7X24小时</p>
                            <p>5-10分钟收货</p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/shipping3.jpg">
                        <div>
                            <p>安全支付</p>
                            <p>购物无忧</p>
                        </div>
                    </li>
                    <li>
                        <img src="./images/shipping4.jpg">
                        <div>
                            <p>行业最低价</p>
                            <p>天天低价</p>
                        </div>
                    </li>
                </ul>
                <div class="tips">
                    <ul>
                        <li>购买流程：</li>
                        <li>1.根据产品页面提示选择需要充值的金额，并填写完相应的账户信息；</li>
                        <li>2.点击“立刻购买”按钮，进入购物车页面，可在此页面添加购买商品数量；</li>
                        <li>3.选择您需要的支付方式进行支付，完成订单，等待充值；</li>
                        <li>4.付款成功后，客服会在5分钟以内根据您留下的充值信息进行审核，系统进行充值并完成交易。</li>
                    </ul>
                    <ul>
                        <li>如何收货：</li>
                        <li>1.付款后请联系客服处理订单；</li>
                        <li>2.如果在交易过程重您遇到任何困难，或者不清楚的地方请随时联系我们的在线客服，我们必将竭诚为您服务；</li>
                        <li>3. 通过paypal付款的客户，如果您首次下单的金额过大或下单行为突变，为了确保您的账户安全，我们会对您的订单进行安全验证，请谅解。</li>
                    </ul>
                    <ul>
                        <li>支付方式：</li>
                        <li>1. 接收全币种支付</li>
                        <li>2. 支持PAYPAL账户及各种信用卡支付（Visa,MasterCard,Maestro,Discover,American</li>
                        <li>Express,JCB,Carte Aurore,Cart epay,Cofinoga ou Privilège,4 étoiles）</li>
                        <li>3. 接收汇丰银行汇款 </li>
                    </ul>
                    <ul>
                        <li>网站声明：</li>
                        <li>请多次确认您的充值账号及相关信息是否正确，如因您充值账号输入错误但充值成功的，系统不予退款。</li>

                    </ul>
                </div>
            </div>
        </div>
        <footer>
            <div class="center">
                <div class="introduce">
                    <div class="logo">
                        <img src="../public/image/logo.png" height="80px">
                    </div>
                    <p>
                        10HKA网站隶属拾小时娱乐有限公司，本公司深耕互联网行业，作为服务平台，10HKA励志服务于全球华人，以“团结、友爱、互助、互信”为公司发展理念。如果您在购物中有任何疑问，请及时联系我们
                    </p>
                    <p><span>QQ:</span>2677950874</p>
                    <p><span>邮箱:</span>2677950874@qq.com</p>
                </div>
                <div>
                    <ul>
                        <li>关于我们</li>
                        <li>公司介绍</li>
                        <li>隐私政策</li>
                        <li>条款与条件</li>
                    </ul>
                    <ul>
                        <li>购物指南</li>
                        <li>免费注册</li>
                        <li>购物流程</li>
                        <li>条款与条件</li>
                    </ul>
                    <ul>
                        <li>支付方式</li>
                        <li>支持的货币</li>
                        <li>支付方式</li>
                        <li>Paypal认证</li>
                        <li>Paypal注册</li>
                    </ul>
                    <ul>
                        <li>帮助信息</li>
                        <li>发货流程</li>
                        <li>退款政策</li>
                    </ul>
                </div>

            </div>
            <div class="my-footer">
                <p> © 2005-2021 www.okpayka.com 版权所有，并保留所有权利</p>
                <div>
                    <img src="../public/image/footer/163.jpg" />
                    <img src="../public/image/footer/Apple.jpg" />
                    <img src="../public/image/footer/Booking.jpg" />
                    <img src="../public/image/footer/ctrip.jpg" />
                    <img src="../public/image/footer/PayPal.jpg" />
                </div>
            </div>

        </footer>
    </div>

</body>


<script>
    var i18n = new VueI18n({
        locale: 'zh_CN',
        messages: i18nMessages
    })
    var app = new Vue({
        el: '#app',
        i18n,
        data() {
            return {
                activeIndex: '1', //激活tab
                select: 100, //当前选中价格
                num: 1,
                isLogin: false, //是否登录
                user: null, //登录的用户信息
                proInfo: {
                    dol: "USD$ 8.64",
                    img: "../public/image/goods/1.jpg",
                    pname: '加载中...',
                    price: "500元宝",
                }, //商品信息
                //菜单列表
                menuList: [
                    {
                        main: "直播平台",
                        body: [
                            {
                                img: "../public/image/goods/13.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '抖音短视频'
                            },
                            {
                                img: "../public/image/goods/20.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: 'YY直播'
                            },
                            {
                                img: "../public/image/goods/9.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '快手直播'
                            },
                            {
                                img: "../public/image/goods/15.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '虎牙直播'
                            },
                            {
                                img: "../public/image/goods/4.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '花椒直播'
                            },
                            {
                                img: "../public/image/goods/10.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '斗鱼直播'
                            }
                        ]
                    },
                    {
                        main: "视频音频",
                        body: [
                            {
                                img: "../public/image/goods/21.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '猫耳FM'
                            },
                            {
                                img: "../public/image/goods/18.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '全民K歌'
                            },
                            {
                                img: "../public/image/goods/22.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: 'bilibili'
                            },
                            {
                                img: "../public/image/goods/23.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '喜马拉雅'
                            },
                            {
                                img: "../public/image/goods/24.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '荔枝FM'
                            },
                            {
                                img: "../public/image/goods/25.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '唱吧'
                            },
                            {
                                img: "../public/image/goods/26.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '腾讯视频'
                            },
                            {
                                img: "../public/image/goods/27.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '优酷视频'
                            },
                        ]
                    },
                    {
                        main: "陪玩陪聊",
                        body: [
                            {
                                img: "../public/image/goods/28.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '比心APP'
                            },
                            {
                                img: "../public/image/goods/29.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: 'TT语音'
                            },
                            {
                                img: "../public/image/goods/30.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '伴伴APP'
                            },
                            {
                                img: "../public/image/goods/31.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '鱼丸星球'
                            },
                            {
                                img: "../public/image/goods/32.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '糖糖语音'
                            },
                            {
                                img: "../public/image/goods/33.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '玩吧APP'
                            },
                            {
                                img: "../public/image/goods/34.png",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '点点开黑'
                            },
                            {
                                img: "../public/image/goods/35.png",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '氧气语音'
                            },
                        ]
                    },
                    {
                        main: "APP手游",
                        body: [
                            {
                                img: "../public/image/goods/36.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '荒野行动'
                            },
                            {
                                img: "../public/image/goods/37.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '光明勇士'
                            },
                            {
                                img: "../public/image/goods/38.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '六界天辰'
                            },
                            {
                                img: "../public/image/goods/39.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '倩女幽魂'
                            },
                            {
                                img: "../public/image/goods/40.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '传说对决'
                            },
                            {
                                img: "../public/image/goods/41.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '第五人格'
                            },
                            {
                                img: "../public/image/goods/42.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '盗梦英雄'
                            }

                        ]
                    },

                    {
                        main: "生活服务",
                        body: [
                            {
                                img: "../public/image/goods/43.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '宽带缴费'
                            },
                            {
                                img: "../public/image/goods/44.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '水费'
                            },
                            {
                                img: "../public/image/goods/45.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '电费'
                            },
                            {
                                img: "../public/image/goods/46.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '燃气费'
                            },
                            {
                                img: "../public/image/goods/47.png",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '预付卡'
                            },
                            {
                                img: "../public/image/goods/48.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '京东会员'
                            },
                            {
                                img: "../public/image/goods/49.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: 'KEEP会员'
                            },
                            {
                                img: "../public/image/goods/50.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '去哪儿会员'
                            },
                            {
                                img: "../public/image/goods/51.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '淘宝天猫会员'
                            },
                            {
                                img: "../public/image/goods/52.jpg",
                                price: "500元宝",
                                dol: "USD$ 8.64",
                                pname: '携程旅游网会员'
                            },
                        ]
                    }

                ]


            }


        },


        created() {
            this.getProInfo()
        },
        mounted() {

            this.checkLogin()
        },
        computed: {
            total() {
                return this.select * this.num
            }

        },
        methods: {


            //去登陆
            gotoLogin() {
                window.location.href = '../login'
            },
            //去home
            gotoHome() {
                window.location.href = "../home"
            },
            //获取商品信息
            getProInfo() {

                if (window.location.href.indexOf('?') != -1) {
                    const params = decodeURI(window.atob(window.location.href.split("?")[1])).split("&")[0].split(
                        '=')[1]
                    this.proInfo = JSON.parse(params)

                    console.log(JSON.parse(params));
                }
            },
            //去首页
            toIndex() {
                window.location.href = '../index/index.html';
            },

            //去商品页面
            gotoProduct(item) {

                var tempwindow = window.open('_blank');
                tempwindow.location = '../product/index.html?' + window.btoa(encodeURI('proInfo=' + JSON
                    .stringify(item)));
            },



            //检查是否登录
            checkLogin() {
                this.user = JSON.parse(localStorage.getItem('user'))
                if (this.user !== null) {
                    this.isLogin = true
                } else {
                    this.isLogin = false
                }

            },

            //退出登录
            logOut() {
                localStorage.removeItem('user')
                this.isLogin = false
                this.user = null
            },
            handleSelect() {

            },
            gotoCar() {
                if (this.isLogin) {

                    let order = {
                        id: Date.now() + Math.round((Math.random() + 1) * 10), //订单Id
                        pname: this.proInfo.pname, //商品名
                        price: this.select, //商品价格
                        sum: this.num, //商品数量
                        img: this.proInfo.img

                    }
                    var tempwindow = window.open('_blank');
                    tempwindow.location = '../pay/index.html?' + window.btoa(encodeURI('order=' + JSON
                        .stringify(order)));


                } else {
                    window.location.href = '../login'
                }
            }
        },

    })
</script>

</html>